/**stop卡的列表页面 */
<template>

  <div class="app-container">

    <div class="filter-container">
      题目：   <el-input v-model="listQuery.faultTitle" placeholder="题目" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      分数：   <el-input v-model="listQuery.faultTitle" placeholder="分数" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
      <!-- <el-button class="filter-item" type="primary" icon="el-icon-download">
        下载
      </el-button> -->
      <!--<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
        reviewer
      </el-checkbox> -->
    </div>
    <div>
      <!-- Note that row-key is necessary to get a correct row order. -->
      <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">

        <el-table-column width="50px" align="center" label="stop卡编号" prop="sid">
          <template slot-scope="scope">
            <span>{{ scope.row.sid }}</span></template>
        </el-table-column>
        <el-table-column min-width="100px" label="被观察对象">
          <template slot-scope="scope">
            <span @click="handleDetail(scope.row)">{{ scope.row.observetype }}</span></template>
        </el-table-column>
        <el-table-column min-width="150px" label="被观察外协单位">
          <template slot-scope="scope">
            <span>{{ scope.row.observeobject }}</span></template>
        </el-table-column>
        <el-table-column min-width="100px" label="被观察者部门">
          <template slot-scope="scope">
            <span v-if="scope.row.observedep!=null">{{ scope.row.observedep.deptName }}</span></template>
        </el-table-column>
        <el-table-column min-width="100px" label="创建人">
          <template slot-scope="scope">
            <span @click="handleDetail(scope.row)">{{ scope.row.createuser.userName }}</span></template>
        </el-table-column>
        <el-table-column min-width="100px" label="创建人部门">
          <template slot-scope="scope">
            <span @click="handleDetail(scope.row)">{{ scope.row.createdep.deptName }}</span></template>
        </el-table-column>
        <el-table-column width="100px" label="创建日期" prop="creatdate">

          <template slot-scope="scope">
            <span>{{ scope.row.creatdate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span></template>
        </el-table-column>
        <el-table-column width="100px" label="发生日期" prop="happenDate">

          <template slot-scope="scope">
            <span>{{ scope.row.happendate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span></template>
        </el-table-column>
        <el-table-column min-width="50px" label="分数">
          <template slot-scope="scope">
            <span>{{ scope.row.score }}</span></template>
        </el-table-column>

        <el-table-column align="center" label="裁决状态" width="100" prop="">
          <template slot-scope="scope">

            <span v-if="scope.row.decidestatus==1">申请中...</span>
            <span v-if="scope.row.decidestatus==0">已删除</span>

            <span v-if="scope.row.decidestatus==3">已裁决</span>
            <span v-if="scope.row.decidestatus==4">已驳回</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="230">
          <template v-if="scope.row.decidestatus==2||scope.row.decidestatus==3" slot-scope="scope">
            <el-button type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fechData" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" custom-class="dialogStyle">

      <div class="el-dialog_body">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="180px" style="width: 800px; margin-left:50px;">
          <el-row :gutter="20" style="font-size: 20px">
            <el-col :span="16">
              <el-row :gutter="20">

                <el-col :span="9">
                  <el-row>安全行为</el-row>

                  <div v-for="(checkOne,index) in checkList" :key="index">
                    <input v-model="checkOne.state" type="checkbox" @click="checkedOne(checkOne)">
                    <span>{{ checkOne.name }}</span>
                  </div>

                </el-col>

                <el-col :span="9">
                  <el-row>不安全行为</el-row>

                  <div v-for="(checkOne,index) in checkList1" :key="index">
                    <input v-model="checkOne.state" type="checkbox" @click="checkedOne1(checkOne)">
                    <span>{{ checkOne.name }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">

                <el-col :span="20">
                  <el-row>所观察的不安全行为/立刻整改的行动/预防再次发生的措施</el-row>
                  <markdown-editor ref="markdownEditor" v-model="temp.actioncontent" :options="{hideModeSwitch:true,previewStyle:'tab'}" height="300px" />
                </el-col>

              </el-row>

              <el-row :gutter="20">

                <el-col :span="20">
                  <el-form-item label="创建日期" prop="creatdate">
                    <el-input v-model="temp.creatdate" type="date" placeholder="请选择日期" />

                  </el-form-item>
                  <el-col :span="20">
                    <el-form-item label="发生日期" prop="happendate">
                      <el-input v-model="temp.happendate" type="date" placeholder="请选择日期" />

                    </el-form-item>

                    <el-form-item label="被观察对象" prop="observetype">

                      <el-input v-model="temp.observetype" />

                    </el-form-item>
                    <el-form-item label="被观察外协单位" prop="observeobject">

                      <el-input v-model="temp.observeobject" />

                    </el-form-item>
                    <el-form-item label="被观察者部门" prop="observeDep">

                      <el-autocomplete
                        v-model="deptName1"
                        class="el-input"
                        :fetch-suggestions="deptSearchAsync1"
                        placeholder="请输入部门"
                        :trigger-on-focus="false"
                        @select="handleSelectTeam1"
                      />

                    </el-form-item>
                    <el-form-item label="创建人部门" prop="createdep">

                      <el-autocomplete
                        v-model="deptName"
                        class="el-input"
                        :fetch-suggestions="deptSearchAsync"
                        placeholder="请输入部门"
                        :trigger-on-focus="false"
                        @select="handleSelectTeam"
                      />

                    </el-form-item>
                    <el-form-item label="创建者" prop="createuser">

                      <el-autocomplete
                        v-model="userName"
                        class="el-input"
                        :fetch-suggestions="userSearchAsync"
                        placeholder="请输入工号"
                        :trigger-on-focus="false"
                        @select="handleSelect"
                      />

                    </el-form-item>
                    <el-form-item label="分数" prop="score">

                      <el-input v-model="temp.score" readonly="readonly" />

                    </el-form-item>
                  </el-col>

                </el-col></el-row>
            </el-col>
            <el-col :span="8">
              <el-row>输入安全观察分类</el-row>
              <el-row>个人保护装备</el-row>
              <div v-for="(checkOne,index) in checkList2" :key="index">
                <input v-model="checkOne.state" type="checkbox" @click="checkedOne2(checkOne)">
                <span>{{ checkOne.name }}</span>
              </div>
              <el-row>作业者姿势和位置</el-row>
              <div v-for="(checkOne,index) in checkList3" :key="index">
                <input v-model="checkOne.state" type="checkbox" @click="checkedOne3(checkOne)">
                <span>{{ checkOne.name }}</span>
              </div>
              <el-row>作业程序与现场整理、整顿</el-row>
              <div v-for="(checkOne,index) in checkList4" :key="index">
                <input v-model="checkOne.state" type="checkbox" @click="checkedOne4(checkOne)">
                <span>{{ checkOne.name }}</span>
              </div>
              <el-row>工具和装备</el-row>
              <div v-for="(checkOne,index) in checkList5" :key="index">
                <input v-model="checkOne.state" type="checkbox" @click="checkedOne5(checkOne)">
                <span>{{ checkOne.name }}</span>
              </div>

              <el-row>其他</el-row>
              <div v-for="(checkOne,index) in checkList6" :key="index">
                <input v-model="checkOne.state" type="checkbox" @click="checkedOne6(checkOne)">
                <span>{{ checkOne.name }}</span>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div></el-dialog>

  </div></template>

<script>
import MarkdownEditor from '@/components/MarkdownEditor'
import { stopList, deletestop, createstop, editstop, fetchAllCount, getPersonList, getDeptList, detailList } from '@/api/stop'
import Sortable from 'sortablejs'
// import { parseTime } from '@/utils'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getuserbyemp } from '@/api/user'
import { getDeptByName } from '@/api/fault'
// arr to obj, such as { CN : "China", US : "USA" }

export default {
  name: 'Stop',
  components: { Pagination, MarkdownEditor },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }

  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      checkList: [
        { index: 1, state: false, name: '个人保护装备' },
        { index: 2, state: false, name: '作业者姿势和位置' },
        { index: 3, state: false, name: '作业程序与现场整理、整顿' },
        { index: 4, state: false, name: '工具和装备' },
        { index: 5, state: false, name: '其他' }

      ],
      checkList1: [
        { index: 1, state: false, name: '个人保护装备' },
        { index: 2, state: false, name: '作业者姿势和位置' },
        { index: 3, state: false, name: '作业程序与现场整理、整顿' },
        { index: 4, state: false, name: '工具和装备' },
        { index: 5, state: false, name: '其他' }

      ],
      checkList2: [
        { index: 1, state: false, name: '防尘口罩' },
        { index: 2, state: false, name: '安全帽' },
        { index: 3, state: false, name: '耳塞' },
        { index: 4, state: false, name: '半面罩' },
        { index: 5, state: false, name: '安全性' },
        { index: 6, state: false, name: '护目镜' },
        { index: 7, state: false, name: '工作服/手套' },
        { index: 8, state: false, name: '放射线' }
      ],
      checkList3: [
        { index: 1, state: false, name: '有碰撞到物体的危险' },
        { index: 2, state: false, name: '有被物体砸到的危险' },
        { index: 3, state: false, name: '在有坠落可能的位置作业' },
        { index: 4, state: false, name: '高温或低温的位置作业' },
        { index: 5, state: false, name: '受限空间内的固定姿势' },
        { index: 6, state: false, name: '吸入/吞食有害物质的危险' },
        { index: 7, state: false, name: '被物体夹住的危险' },
        { index: 8, state: false, name: '搬运物体时，重复不合理的动作' },
        { index: 9, state: false, name: '接触电流、电击' }
      ],
      checkList4: [
        { index: 1, state: false, name: '程序不合适' },
        { index: 2, state: false, name: '程序未被知道/了解' },
        { index: 3, state: false, name: '现场整理、整顿未被遵守' },
        { index: 4, state: false, name: '现场整理标准不合适' },
        { index: 5, state: false, name: '现场整理标准未被知道/了解' },
        { index: 6, state: false, name: '程序未被遵守' }

      ],
      checkList5: [
        { index: 1, state: false, name: '使用不正确的工作或装备' },
        { index: 2, state: false, name: '工具或装备的状况不良' },
        { index: 3, state: false, name: '使用工具或装备方法不当' }

      ],

      checkList6: [
        { index: 1, state: false, name: '手机' },
        { index: 2, state: false, name: '吸烟' },
        { index: 3, state: false, name: '车辆(速度,行车路线,停放位置,饮酒)' },
        { index: 4, state: false, name: '一般安全' },
        { index: 5, state: false, name: '临时建筑物' }

      ],

      safeList: [],
      unsafeList: [],
      productlist: [],
      actionlist: [],
      toollist: [],
      worklist: [],
      otherlist: [],
      mainAllList: [],
      mainAllList2: [],
      detailAllList: [],
      cidList: [],
      editList: [],
      deptId1: '',
      deptName1: null,
      deptName: null,
      userName: null,
      userId: '',
      deptId: '',
      sortable: null,
      oldList: [],
      newList: [],
      // 参数条件
      listQuery: {
        page: 1,
        limit: 20,

        startDate: null,
        endDate: null
      },
      personlist: null,
      deptlist: null,

      temp: {
        sid: '',
        creatdate: '',
        happendate: '',
        observetype: '',
        observedep: '',
        observeobject: '',

        createuser: '',
        createdep: '',
        decidestatus: '',
        actioncontent: '',
        score: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增',
        detail: '明细',
        detailreport: '未遂事故报告'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        // timestamp: [{ type: 'faultTime', required: true, message: 'timestamp is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  computed: {

    checkRes: function() {
      var res = []
      this.checkList.forEach(function(one) {
        if (one.state === true) res.push(one.name)
      })
      return res
    }
  },
  mounted: function() {
    var _this = this
    var res = ['1', '2'] // 这里是默认的选择之
    this.checkList.forEach(function(one, index) {
      if (res.indexOf(one.name) >= 0) _this.checkList[index].state = true
    })
  },

  created() {
    this.fechData()
  },
  methods: {
    checkedOne: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.safeList.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.safeList.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.safeList.splice(index1, 1)
      }
      console.log(this.safeList)
    },
    checkedOne1: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.unsafeList.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.unsafeList.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.unsafeList.splice(index1, 1)
      }
      console.log(this.unsafeList)
    },
    checkedOne2: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.productlist.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.productlist.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.productlist.splice(index1, 1)
      }
      console.log(this.productlist)
    },
    checkedOne3: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.actionlist.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.actionlist.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.actionlist.splice(index1, 1)
      }
      console.log(this.actionlist)
    },
    checkedOne5: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.toollist.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.toollist.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.toollist.splice(index1, 1)
      }
      console.log(this.toollist)
    },
    checkedOne4: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.worklist.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.worklist.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.worklist.splice(index1, 1)
      }
      console.log(this.worklist)
    },
    checkedOne6: function(one) {
      one.state = !one.state

      if (one.state === true) {
        this.otherlist.push(one.name)
      }
      if (one.state === false) {
        var index1 = this.otherlist.findIndex(item => {
          if (item.index1 === one.index) {
            return true
          }
        })
        this.otherlist.splice(index1, 1)
      }
      console.log(this.otherlist)
    },
    fechData() {
      getPersonList().then(response => {
        this.personlist = response.listName
      })
      getDeptList().then(response => {
        this.deptlist = response.listName
      })

      fetchAllCount().then(response => {
        this.total = response.count
      })
      stopList(this.listQuery).then(response => {
        this.listLoading = true
        this.list = response.ehsstopList
        this.showList = response.ehsstopList
        console.log('888888888888888' + response.ehsstopList)
        this.listLoading = false
        // this.oldList = response.map(v => v.id)
      //  this.newList = response.map(v => v.id).slice()
      })
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      // alert(this.dialogStatus)
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 问题所在：select选择后不返回数据到选择框

          const a1 = this.safeList.toString()

          const a2 = this.unsafeList.toString()

          const a3 = this.productlist.toString()

          const a4 = this.actionlist.toString()

          const a5 = this.worklist.toString()
          const a6 = this.toollist.toString()
          const a7 = this.otherlist.toString()
          this.temp.author = 'vue-element-admin'

          const query = { deptId1: this.deptId1, deptId: this.deptId, userId: this.userId, userName: this.userName, deptName: this.deptName, deptName1: this.deptName1, creatdate: this.temp.creatdate, happendate: this.temp.happendate,
            observetype: this.temp.observetype, observeobject: this.temp.observeobject, decidestatus: 1,
            safe: a1, unsafe: a2, personproduct: a3, action: a4, work: a5, tool: a6, other: a7, actioncontent: this.temp.actioncontent }
          createstop(query).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Created Successfully',
              type: 'success',
              duration: 2000
            })
          })
          // 刷新页面
          location.reload()
        }
      })
    },
    handleDownload() {

    },
    showReviewer() {

    },
    async handleSelect(u) {
      this.userName = u.userName
      this.userId = u.userId
      // console.log(this.userId)
    },
    async userSearchAsync(queryString, callback) {
      var list = []
      const { userList } = await getuserbyemp(queryString)
      userList.forEach(r => {
        var tem_obj = {}
        tem_obj.value = r.empNo + '-' + r.userName + '-' + r.userId
        tem_obj.userName = r.userName
        tem_obj.userId = r.userId
        list.push(tem_obj)
      })

      callback(list)
      // console.log(queryString)
    },
    async deptSearchAsync(queryString, callback) {
      var list = []
      const { deptList } = await getDeptByName(queryString)
      deptList.forEach(r => {
        var tem_obj = {}
        tem_obj.value = r.deptId + '-' + r.deptName
        tem_obj.deptName = r.deptName
        tem_obj.deptId = r.deptId
        list.push(tem_obj)
      })
      callback(list)
      // console.log(queryString)
    },
    async deptSearchAsync1(queryString, callback) {
      var list = []
      const { deptList } = await getDeptByName(queryString)
      deptList.forEach(r => {
        var tem_obj = {}
        tem_obj.value = r.deptId + '-' + r.deptName
        tem_obj.deptName = r.deptName
        tem_obj.deptId = r.deptId
        list.push(tem_obj)
      })
      callback(list)
      // console.log(queryString)
    },
    async handleSelectTeam(u) {
      this.deptName = u.deptName
      this.deptId = u.deptId
      // console.log(this.userId)
    },
    async handleSelectTeam1(u) {
      this.deptName1 = u.deptName
      this.deptId1 = u.deptId
      // console.log(this.userId)
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fechData()
    },
    resetTemp() {
      this.temp = {
        sid: '',
        creatdate: '',
        happendate: '',
        observetype: '',
        observedep: '',
        observeobject: '',
        createuser: '',
        createdep: '',
        decidestatus: '',
        actioncontent: '',
        score: ''
      }
    },
    handleDelete(row) {
      console.log(row)

      deletestop(row.sid).then(response => {

      })
      location.reload()
    },
    handleEdit(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp1 = Object.assign({}, row1) // copy obj
      console.log('MMMMMMMMMMM' + this.temp1)
      this.temp.sid = this.temp1.sid

      // alert(row.sid)
      this.userName = this.temp1.createuser.userName
      this.deptName = this.temp1.createdep.deptName
      this.deptName1 = this.temp1.observedep.deptName
      this.temp.creatdate = this.temp1.creatdate
      this.temp.happendate = this.temp1.happendate
      this.temp.observetype = this.temp1.observetype

      const query = { sid: row.sid }
      detailList(query).then(response => {
        this.obj = response
        const listneed = response.detailList
        this.editList = response.detailList
        console.log(listneed)
        listneed.forEach((v, i) => {
          if (v.ehsactionmain.cid != null) {
            this.cidList.push(v.ehsactionmain.cid)
          }
          if (v.ehsactionmain.ehsaction.aid === 1) {
            this.mainAllList.push(v.ehsactionmain.checktypename)
          }
          if (v.ehsactionmain.ehsaction.aid === 2) {
            this.mainAllList2.push(v.ehsactionmain.checktypename)
          }
          this.detailAllList.push(v.childdetailname)
          if (v.ehsactionmain.ehsaction.aid === 1 && v.ehsactionmain.checktypename === '个人保护装备') {
            this.productlist.push(v.childdetailname)
          }
          if (v.ehsactionmain.ehsaction.aid === 1 && v.ehsactionmain.checktypename === '作业者姿势和位置') {
            this.actionlist.push(v.childdetailname)
          }
          if (v.ehsactionmain.ehsaction.aid === 1 && v.ehsactionmain.checktypename === '作业程序与现场整理、整顿') {
            this.worklist.push(v.childdetailname)
          }
          if (v.ehsactionmain.ehsaction.aid === 1 && v.ehsactionmain.checktypename === '工具和装备') {
            this.toollist.push(v.childdetailname)
          }
          if (v.ehsactionmain.ehsaction.aid === 1 && v.ehsactionmain.checktypename === '其他') {
            this.otherlist.push(v.childdetailname)
          }
        })

        this.safeList = this.unique(this.mainAllList)
        this.unsafeList = this.unique(this.mainAllList2)
        this.otherlist = this.unique(this.otherlist)
        this.worklist = this.unique(this.worklist)
        this.productlist = this.unique(this.productlist)
        this.actionlist = this.unique(this.actionlist)
        this.toollist = this.unique(this.toollist)
        this.cidList = this.unique(this.cidList)
        console.log('2' + this.detailAllList)
        // 安全行为

        this.checkList.forEach((v, i) => {
          console.log(v, i)

          this.safeList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })

        // 不安全行为
        this.checkList1.forEach((v, i) => {
          console.log(v, i)

          this.unsafeList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })

        this.checkList2.forEach((v, i) => {
          console.log(v, i)
          this.productlist.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList3.forEach((v, i) => {
          console.log(v, i)
          this.actionlist.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList4.forEach((v, i) => {
          console.log(v, i)
          this.worklist.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList5.forEach((v, i) => {
          console.log(v, i)
          this.toollist.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList6.forEach((v, i) => {
          console.log(v, i)
          this.otherlist.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
      })

      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    unique(arr) { // 根据唯一标识no来对数组进行过滤
      const res = new Map() // 定义常量 res,值为一个Map对象实例
      // 返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
    },

    updateData() {
      // alert(this.dialogStatus)
      if (this.dialogStatus === 'detail') {
        location.reload()
      } else if (this.dialogStatus === 'update') {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const tempData = Object.assign({}, this.temp)
            // const query1 = JSON.parse(JSON.stringify(tempData))
            console.log('安全111' + this.safeList)
            const a1 = this.safeList.toString()
            console.log('安全111' + this.unsafeList)
            const a2 = this.unsafeList.toString()

            const a3 = this.productlist.toString()
            console.log('输出' + a3)
            const a4 = this.actionlist.toString()

            const a5 = this.worklist.toString()
            const a6 = this.toollist.toString()
            const a7 = this.otherlist.toString()

            tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
            const query = { cidList: this.cidList.toString(), userName: this.userName, deptName: this.deptName, deptName1: this.deptName1, creatdate: this.temp.creatdate, happendate: this.temp.happendate,
              observetype: this.temp.observetype, observeobject: this.temp.observeobject, decidestatus: 1,
              safe: a1, unsafe: a2, personproduct: a3, action: a4, work: a5, tool: a6, other: a7 }
            editstop(query).then(response => {
              this.obj = response

              // alert('修改成功')
            })
            // 刷新页面
            // location.reload()
          }
        })
      }
    },

    handleDetail(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1) // copy obj
      // alert(row.sid)
      this.userName = this.temp.createuser.userName
      this.deptName = this.temp.createdep.deptName
      this.deptName1 = this.temp.observedep.deptName
      console.log(this.temp.observedep)

      // alert(this.deptName1)
      // this.deptName1 = this.temp.observeObject.deptName
      const query = { sid: row.sid }
      detailList(query).then(response => {
        this.obj = response
        const listneed = response.detailList
        console.log(listneed)
        listneed.forEach((v, i) => {
          if (v.ehsactionmain.ehsaction.aid === 1) {
            this.mainAllList.push(v.ehsactionmain.checktypename)
          }
          if (v.ehsactionmain.ehsaction.aid === 2) {
            this.mainAllList2.push(v.ehsactionmain.checktypename)
          }
          this.detailAllList.push(v.childdetailname)
        })
        console.log('不安全' + this.mainAllList2)
        console.log('安全' + this.mainAllList)
        console.log('2' + this.detailAllList)
        // 安全行为

        this.checkList.forEach((v, i) => {
          console.log(v, i)

          this.mainAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        // 不安全行为
        this.checkList1.forEach((v, i) => {
          console.log(v, i)

          this.mainAllList2.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })

        this.checkList2.forEach((v, i) => {
          console.log(v, i)
          this.detailAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList3.forEach((v, i) => {
          console.log(v, i)
          this.detailAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList4.forEach((v, i) => {
          console.log(v, i)
          this.detailAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList5.forEach((v, i) => {
          console.log(v, i)
          this.detailAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
        this.checkList6.forEach((v, i) => {
          console.log(v, i)
          this.detailAllList.forEach((m, j) => {
            if (m === v.name) {
              v.state = true
            }
          })
        })
      })

      this.dialogStatus = 'detail'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    getHtml() {
      this.faultContent = this.$refs.markdownEditor.getHtml()
      console.log(this.faultContent)
    },

    setSort() {
      const el = this.list[0]

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    }
  }
}
</script>

<style>

.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>
.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
</style>
